<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Flat UI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Loading Bootstrap -->
    <link href="{{STATIC_URL}}css/bootstrap.css" rel="stylesheet">

    <!-- Loading Flat UI -->
    <link href="{{STATIC_URL}}css/flat-ui.css" rel="stylesheet">
    <link rel="shortcut icon" href="images/favicon.ico">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">

      <div id="track-full">
        <canvas id="track"
        width="1400"
        height="700"
        style="width:1400px;
        height:700px;">
        </canvas>
      </div>

      <div id="control-panel">
          <span id="toggle-btn"><span class="fui-menu-16"></span></span>
          <div id="settings-panel">

           <div class="row">
            <div class="span3">
              <h3 id="animar" class="demo-panel-title">Racers</h3>
              <div class="share mrm">
                <ul>
                  <li>
                    <label class="share-label" for="share-toggle2">Racer 1</label>
                    <div class="toggle">
                      <label class="toggle-radio" for="share-toggle2">ON</label>
                      <input type="radio" name="share-toggles" id="share-toggle2" value="toggle1">
                      <label class="toggle-radio" for="share-toggle1">OFF</label>
                      <input type="radio" name="share-toggles" id="share-toggle1" value="toggle2" checked="checked">
                    </div>
                  </li>
                  <li>
                    <label class="share-label" for="share-toggle4">Racer 2</label>
                    <div class="toggle">
                      <label class="toggle-radio" for="share-toggle4">ON</label>
                      <input type="radio" name="share-toggles2" id="share-toggle4" value="toggle1" checked="checked">
                      <label class="toggle-radio" for="share-toggle3">OFF</label>
                      <input type="radio" name="share-toggles2" id="share-toggle3" value="toggle2">
                    </div>
                  </li>
                  <li>
                    <label class="share-label" for="share-toggle6">Racer 3</label>
                    <div class="toggle">
                      <label class="toggle-radio" for="share-toggle6">ON</label>
                      <input type="radio" name="share-toggles3" id="share-toggle6" value="toggle1">
                      <label class="toggle-radio" for="share-toggle5">OFF</label>
                      <input type="radio" name="share-toggles3" id="share-toggle5" value="toggle2" checked="checked">
                    </div>
                  </li>
                </ul>
                <a href="#" class="btn btn-primary btn-block btn-large" id="boton">update</a>
              </div> <!-- /share -->
            </div>
          </div>

          <p id="test"></p>
          <div class="row" style="margin-top: 20px">
            <div class="span3">
              <span style="margin-right:20px;">Distance: </span>
              <input type="text" value="" placeholder="Km" class="span1">
            </div>
          </div>


          <div class="row" style="margin: 20px 0 0 15px;">
            <div class="span2">
              <a href="#" class="btn btn-large btn-block btn-warning">Get Ready!</a>
            </div>
          </div>

          <div class="row" style="margin: 20px 0 0 15px;">
            <div class="span2">
              <a href="#" class="btn btn-large btn-block disabled">Run!</a>
            </div>
          </div>
          <div class="row" style="margin: 20px 0 0 15px;">
            <div class="span2">
              <a href="#" class="btn btn-large btn-block disabled">Stop</a>
            </div>
          </div>
          </div>
      </div>

      <div id="slider" class="ui-slider"
                style="   width:80%;
                          height:25px;
                          position: absolute;
                          bottom:0;
                          right:10%;">
          </div>
      <!--div class="progress"

        >

            <div class="bar" style="width: 40%;"></div>
            <div class="bar bar-warning" style="width: 10%;"></div>
            <div class="bar bar-danger" style="width: 10%;"></div>
            <div class="bar bar-success" style="width: 10%;"></div>
            <div class="bar bar-info" style="width: 10%;"></div>
      </div>
    </div--> <!-- /container -->

    <!-- Load JS here for greater good =============================-->
    <script src="{{STATIC_URL}}js/jquery-1.8.2.min.js"></script>
    <script src="{{STATIC_URL}}js/jquery-ui-1.10.0.custom.min.js"></script>
    <script src="{{STATIC_URL}}js/custom_checkbox_and_radio.js"></script>
    <script src="{{STATIC_URL}}js/custom_radio.js"></script>
    <script src="{{STATIC_URL}}js/bootstrap-tooltip.js"></script>
    <script src="{{STATIC_URL}}js/jquery.placeholder.js"></script>
    <script src="{{STATIC_URL}}js/application.js"></script>
    <script src="{{STATIC_URL}}js/racer.js"></script>
    <!--[if lt IE 8]>
      <script src="js/icon-font-ie7.js"></script>
      <script src="js/icon-font-ie7-24.js"></script>
    <![endif]-->
  </body>
</html>
